<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./static/css/style.css" rel="stylesheet">
    <style lang="less" scoped>
        html, body, .home, .content {margin: 0;padding: 0;width: 100%;height: 100%;}
        .home {
            background-image: url("./static/img/sg-cont-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
        }
        .home-main {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        /** 首衡高碑店国际农产品交易中心*/
        .title {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 90px;
            color: #FFFFFF;
            background: linear-gradient(0deg, #90D0F9 0%, #FCFFFC 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        /** 欢迎您*/
        .huanying {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 220px;
            color: #FFFFFF;
            background: linear-gradient(0deg, #90D0F9 0%, #FCFFFC 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding: 10px 0;
            text-align: center;
        }
        /** 等待车辆进场中...*/
        .state {
            background-image: url("./static/img/sg-text-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 1150px;
            height: 150px;
            margin: 0 auto;
            text-align: center;
            line-height: 150px;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 120px;
            color: #FFEE5B;
        }
        /** 状态2的box **/
        .content {
            background-image: url("./static/img/sg-cont-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        /** 顶部标题 **/
        .content-title {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 90px;
            color: #FFFFFF;
            background: linear-gradient(0deg, #FFFFFF 0%, #C9E0FF 49.755859375%, #BCCCF8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            padding-top: 20px;
        }
        /** 3个框 **/
        .cont {
            flex: 1;
            padding: 84px 80px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .cont-top {
            width: 100%;
            height: 527px;
            display: flex;
            justify-content: space-between;
        }
        .item {
            height: 544px;
            background-image: url("./static/img/sg-itembg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }
        .item1 {
            width: 750px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 90px 0;
            box-sizing: border-box;
        }
        .item2 {
            width: 975px;
            padding: 40px 52px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .car {
            width: 677px;
            height: 105px;
            background-image: url("./static/img/sg-car.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .car-no {
            width: 677px;
            height: 191px;
            background-image: url("./static/img/sg-car-no.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .car-text {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 116px;
            color: #FDFDFF;
            background: linear-gradient(0deg, #BDC2FF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .itemView {
            display: flex;
            align-items: center;
            width: 100%;
            height: 68px;
            font-size: 66px;
            line-height: 68px;
        }
        .icon {
            width: 60px;
            height: 60px;
            margin-top: 10px;
        }
        .til {
            font-family: PingFang SC;
            font-weight: 500;
            color: #FDFDFF;
            margin: 0 20px 0 9px;
            text-align: center;
        }
        .con {
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFEE5B;
            margin-left: 23px;
            box-sizing: border-box;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
        }
        .con2 {
            height: 100%;
            position: relative;
        }
        .con2-car-type {
            width: 100%;
            height: 100%;
            display: inline-block;
            text-align: left;
            position: absolute;
            top: 0;
            right: 0;
        }
        /*.con2 { background-image: url("./static/img/sg-text-bg2.png"); }*/
        /*.con3 { background-image: url("./static/img/sg-text-bg3.png"); }*/
        /*.con4 { background-image: url("./static/img/sg-text-bg4.png"); }*/
        /*.con5 { background-image: url("./static/img/sg-text-bg5.png"); }*/
        .cont-bottom {
            width: 100%;
            height: 260px;
            margin-top: 15px;
            background-image: url("./static/img/sg-state-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cont-bottom-text {
            width: 100%;
            height: 100%;
            position: relative;
            text-align: center;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 140px;
            color: #e3f0ff;
            white-space: nowrap;
            overflow: hidden;
        }
        .message-box {
            width: 100%;
            display: inline-block;
            text-align: center;
            line-height: 260px;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
<div class="home" id="status1">
    <div class="home-main">
        <div class="title">首衡高碑店国际农产品交易中心</div>
        <div class="huanying">欢迎您</div>
        <div class="state">等待车辆进场中...</div>
    </div>
</div>
<div class="content" id="status2" style="display: none;">
    <div class="content-title">首衡高碑店国际农产品交易中心</div>
    <div class="cont">
        <div class="cont-top">
            <div class="item item1">
                <img class="car" src="./static/img/sg-car.png" alt="">
                <div class="car-no">
                    <div class="car-text" id="carNo"></div>
                </div>
            </div>
            <div class="item item2">
                <div class="itemView">
                    <img class="icon" src="./static/img/sg-cion2.png" alt="">
                    <div class="til">预约车型</div>
                    <div class="con con2">
                        <div class="con2-car-type" id="subCarType"></div>
                    </div>
                </div>
                <div class="itemView">
                    <img class="icon" src="./static/img/sg-cion3.png" alt="">
                    <div class="til">预约品类</div>
                    <div class="con con3" id="subProdName"></div>
                </div>
                <div class="itemView">
                    <img class="icon" src="./static/img/sg-cion4.png" alt="">
                    <div class="til">车辆重量</div>
                    <div class="con con4" id="weight"></div>
                </div>
                <div class="itemView">
                    <img class="icon" src="./static/img/sg-cion5.png" alt="">
                    <div class="til">扣费金额</div>
                    <div class="con con5" id="realAmount"></div>
                </div>
            </div>
        </div>
        <div class="cont-bottom">
            <div class="cont-bottom-text">
                <div class="message-box" id="message"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./static/js/jquery-3.3.1.min.js"></script>
<script src="./static/js/VoiceUtil.js"></script>
<script>
    $(document).ready(function() {
        var tipsRemoteAdr = window.location.host;
        console.log(tipsRemoteAdr, "tipsRemoteAdr");
        var statusArr = [1, 2]
        var interval = 500;
        setTimeout(function() {
            reloadVoices();
            setInterval(sendRequest, interval);
        }, 3000);
        function sendRequest(){
            $.ajax({
                type: "GET",
                url: "http://" + tipsRemoteAdr + "/lpr/tips",
                dataType: "json",
                success: function(res) {
                    // console.log(res, "res");
                    if(res.code == '200'){
                        displayDiv(res.data);
                    }
                }
            });
        }
        function displayDiv(data){
            //隐藏
            for (let i = 0; i < statusArr.length; i++) {
                $("#status" + statusArr[i]).hide();
            }
            //参数
            if(data.carNo != null && data.carNo != ''){
                $("#carNo").html(data.carNo);
            }
            if(data.subCarType != null && data.subCarType != ''){
                $("#subCarType").html(data.subCarType);
            }
            if(data.subProdName != null && data.subProdName != ''){
                $("#subProdName").html(data.subProdName);
            }
            if(data.weight != null && data.weight != ''){
                $("#weight").html(data.weight + " KG");
            }
            if(data.realAmount != null && data.realAmount != ''){
                $("#realAmount").html(data.realAmount + " 元");
            }
            // 消息
            if(data.errorMsg != null && data.errorMsg != ''){
                $("#message").html(data.errorMsg);
            }
            $("#status" + data.status).show();
            if(data.status == 1){
                clearVoices();
            }else{
                // 音频
                if(data.voiceMsg != null && data.voiceMsg != ''){
                    if(!voiceHasArr.includes(data.voiceMsg)){
                        voiceToArr.push(data.voiceMsg);
                    }
                    playVoice();
                }
            }
        }
    });
</script>
<script>
    let subCarTypeInterval, messageInterval
    clearInterval(subCarTypeInterval)
    clearInterval(messageInterval)
    function stringRollLeft (elementId, scrollAmount = 1) {
        let marqueeElement = document.getElementById(elementId);
        let viewWidth = marqueeElement.offsetWidth
        let totalWidth = marqueeElement.scrollWidth
        let offsetValue = marqueeElement.style.right ? parseInt(marqueeElement.style.right) : 0;
        if (viewWidth < totalWidth) {
            offsetValue += scrollAmount // 每次滚动的像素数
            marqueeElement.style.right = offsetValue + 'px'
        }
        let howLong = Math.abs(offsetValue)
        if (howLong >= (totalWidth - 0.6 * viewWidth)) {
            marqueeElement.style.right = 0 + 'px'
        }
    }
    // 设置滚动间隔（例如每秒30次）
    subCarTypeInterval = setInterval(() => {
        stringRollLeft('subCarType', 2)
    }, 30)
    messageInterval = setInterval(() => {
        stringRollLeft('message', 2)
    }, 30)
</script>
</html>
